import type { FC } from "react"
import QuestionInputConfig, { QuestionInputPropsType } from "./QuestionInput"
import QuestionTitleConfig, { QuestionTitlePropsType } from "./QuestionTitle"
import QuestionParagraphConfig, { QuestionParagraphPropsType } from "./QuestionParagraph"
import QuestionInfoConfig, { QuestionInfoPropsType } from "./QuestionInfo"
import QuestionTeaxtareaConfig, { QuestionTextareaPropsType } from "./QuestionTextarea"
import QuestionRadioConfig, { QuestionRadioPropsType, QuestionRadioStatPropsType } from "./QuestionRadio"
import QuestionCheckboxConfig, { QuestionCheckboxPropsType, QuestionCheckboxStatPropsType } from "./QuestionCheckbox"

/**
 * 对于可以使用 & 而不能使用 | 的理解：
 * 因为componentConfigList存储的是所有组件的配置，是一个列表，假设使用|，那么如果其中一个类型可能不存在，那么-
 * 在遍历这个列表的时候会遍历不到配置项
 *
 * QuestionInputPropsType 与 QuestionTitlePropsType类型中使用了可选符合，即使使用了&，还可以只满足其中一个的
 */

// 统一，各个组件的prop type
export type ComponentPropsType = QuestionInputPropsType &
    QuestionTitlePropsType &
    QuestionParagraphPropsType &
    QuestionInfoPropsType &
    QuestionTextareaPropsType &
    QuestionRadioPropsType &
    QuestionCheckboxPropsType

// 统一，各个组件的统计属性类型
type ComponentStatPropsType = QuestionRadioStatPropsType & QuestionCheckboxStatPropsType

// 统一，组件的配置 type
export type ComponentConfigType = {
    title: string
    type: string
    Component: FC<ComponentPropsType> // 函数组件类型
    PropComponent: FC<ComponentPropsType>
    defaultProps: ComponentPropsType
    // 可选类型，有的没有这个统计组件
    StatComponent?: FC<ComponentStatPropsType>
}

// 全部组件配置的列表
const componentConfigList: ComponentConfigType[] = [
    QuestionTitleConfig,
    QuestionInputConfig,
    QuestionParagraphConfig,
    QuestionInfoConfig,
    QuestionTeaxtareaConfig,
    QuestionRadioConfig,
    QuestionCheckboxConfig
]

// 组件分组
export const componentConfigGroup = [
    {
        groupId: "textGroup",
        groupName: "文本显示",
        components: [QuestionInfoConfig, QuestionTitleConfig, QuestionParagraphConfig] // 列表
    },
    {
        groupId: "inputGroup",
        groupName: "用户输入",
        components: [QuestionInputConfig, QuestionTeaxtareaConfig] // 列表
    },
    {
        groupId: "chooseGroup",
        groupName: "用户选择",
        components: [QuestionRadioConfig, QuestionCheckboxConfig]
    }
]

export function getComponentConfigByType(type: string) {
    return componentConfigList.find(componentConfig => componentConfig.type === type)
}
